<template>
  <div class="register_page">
       <Card :padding="20"  style="width:400px" class="car">
          <p slot="title">
              使用邮箱地址注册
          </p>
             <Form ref="formValidate"  label-position="top" :model="formValidate" :rules="ruleValidate">
                <FormItem label="电子邮箱" prop="email">
                    <Input  prefix="ios-mail-outline" v-model="formValidate.email" />
                </FormItem>
                <FormItem label="密码"  prop="password">
                    <Input   prefix="ios-lock-outline"  type="password" v-model="formValidate.password" />
                </FormItem>
                 <FormItem label="用户名"  prop="name">
                    <Input   prefix="ios-contact-outline"  v-model="formValidate.name" placeholder="限制10个字符" />
                </FormItem>
             <Button type="success" long @click="handleSubmit('formValidate')">Submit</Button>
            </Form>
            <p class="reg">已拥有账户？<a href="/login">登陆</a></p>
       </Card>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
    data(){
          return {
                formValidate: {
                    password: '',
                    email: '',
                    name:'',
                  
                },
                ruleValidate: {
                    password: [
                        { required: true, message: 'The password cannot be empty', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                        { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                    ],
                     name: [
                        { required: true, message: 'Name cannot be empty', trigger: 'blur' },
                    ],
               }
        }
    },
     methods: {
            ...mapMutations(['changeCanPost']),
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let now = (new Date().getTime())/1000 - parseInt(this.$store.state.canpost) /1000
                        if(now < 30){
                            this.$Message.error('间隔30秒注册')
                            return false;
                        }
                        var that = this
                        this.$axios.post('/api/manage/register',this.formValidate).then(function(res){
                           if(res.data.err_code == 2){
                               that.$Message.error('该邮箱已被注册！');
                           }else if(res.data.err_code == 1){
                                that.$Message.error('注册失败，请正确填写注册信息！');
                           }else if(res.data.err_code == 0){
                               that.$Message.success('注册成功')
                               that.$refs.formValidate.resetFields();
                               that.changeCanPost({canpost:new Date().getTime()})
                           }else{
                                that.$Message.error('注册失败！')
                           }
                        
                        })
                        
                    } else {
                        this.$Message.error('请正确填写注册信息！');
                    }
                })
            }
        
        }
}
</script>

<style scoped>
    .car{
        margin: 100px auto;
    }
    .logo-img{
        width: 360px
    }
    .reg{
        margin: 10px 0;
        text-align: center
    }
</style>